<div *ngIf="allBeans">
    <h2 id="configuration-page-heading" jhiTranslate="configuration.title">Configuration</h2>

    <span jhiTranslate="configuration.filter">Filter (by prefix)</span> <input (ngModelChange)="filterAndSortBeans()"
                                                                               [(ngModel)]="beansFilter"
                                                                               class="form-control" type="text">

    <h3 id="spring-configuration">Spring configuration</h3>

    <table aria-describedby="spring-configuration" class="table table-striped table-bordered table-responsive d-table">
        <thead>
        <tr [(ascending)]="beansAscending" [callback]="filterAndSortBeans.bind(this)" jhiSort predicate="prefix">
            <th class="w-40" jhiSortBy="prefix" scope="col"><span
                    jhiTranslate="configuration.table.prefix">Prefix</span>
                <fa-icon icon="sort"></fa-icon>
            </th>
            <th class="w-60" scope="col"><span jhiTranslate="configuration.table.properties">Properties</span></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let bean of beans">
            <td><span>{{ bean.prefix }}</span></td>
            <td>
                <div *ngFor="let property of bean.properties | keys" class="row">
                    <div class="col-md-4">{{ property.key }}</div>
                    <div class="col-md-8">
                        <span class="float-right badge-secondary break">{{ property.value | json }}</span>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

    <div *ngFor="let propertySource of propertySources; let i = index">
        <h4 [id]="'property-source-' + i"><span>{{ propertySource.name }}</span></h4>

        <table [attr.aria-describedby]="'property-source-' + i"
               class="table table-sm table-striped table-bordered table-responsive d-table"><!-- //NOSONAR -->
            <thead>
            <tr>
                <th class="w-40" scope="col">Property</th>
                <th class="w-60" scope="col">Value</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let property of propertySource.properties | keys">
                <td class="break">{{ property.key }}</td>
                <td class="break">
                    <span class="float-right badge-secondary break">{{ property.value.value }}</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
